<!--
@Author: 刘洋 3016218175

@Date: 2018-12-12

@行政人员主界面

@Last Modified time: 2018-12-16-->
<header class="main-header">

  <!-- Logo -->
  <a class="logo">
    <!-- mini logo for sidebar mini 50x50 pixels -->
    <span class="logo-mini"><b>系统</b></span>
    <!-- logo for regular state and mobile devices -->
    <span class="logo-lg"><b>考勤系统</b></span>
  </a>

  <!-- Header Navbar -->
  <nav class="navbar navbar-static-top" role="navigation">
    <!-- Sidebar toggle button-->
    <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
      <span class="sr-only">Toggle navigation</span>
    </a>
    <!-- Navbar Right Menu -->
    <div class="navbar-custom-menu">
      <ul class="nav navbar-nav">
        <!-- User Account Menu -->
        <li class="dropdown user user-menu">
          <!-- Menu Toggle Button -->
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <!-- The user image in the navbar-->
            <img src="../../../assets/img/{{user.name}}.jpg" class="user-image" alt="User Image">
            <!-- hidden-xs hides the username on small devices so only the image appears. -->
            <span class="hidden-xs">{{user.name}}</span>
          </a>
          <ul class="dropdown-menu">
            <!-- The user image in the menu -->
            <li class="user-header">
              <img src="../../../assets/img/{{user.name}}.jpg" class="img-circle" alt="User Image">

              <p>
                {{user.name}}<br>
                {{user.department}}{{user.position}}
              </p>
            </li>
            <li class="user-footer">
              <div class="pull-left">
                <a href="#" class="btn btn-default btn-flat">Profile</a>
              </div>
              <div class="pull-right">
                <a href="#" class="btn btn-default btn-flat">退出登录</a>
              </div>
            </li>
          </ul>
        </li>
        <!-- Control Sidebar Toggle Button -->
        <li>
          <a href="#" data-toggle="control-sidebar" (click)="getme()"><i class="fa fa-gears"></i></a>
        </li>
      </ul>
    </div>
  </nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">

  <!-- sidebar: style can be found in sidebar.less -->
  <section class="sidebar">

    <!-- Sidebar user panel (optional) -->
    <div class="user-panel">
      <div class="pull-left image">
        <img src="../../../assets/img/{{user.name}}.jpg" class="img-circle" alt="User Image">
      </div>
      <div class="pull-left info">
        <p>{{user.name}}</p>
        <!-- Status -->
        <a><i class="fa fa-circle text-success"></i>Online</a>
      </div>
    </div>


    <!-- Sidebar Menu -->
    <ul class="sidebar-menu" data-widget="tree">
      <li class="header">功能列表</li>
      <!-- Optionally, you can add icons to the links -->
      <li><a [routerLink]="['employeeinfo']"><i class="fa fa-link"></i><span>员工信息</span></a></li>
      <li><a [routerLink]="['register']"><i class="fa fa-link"></i><span>员工注册</span></a></li>
      <li><a [routerLink]="['signininfo']"><i class="fa fa-link"></i> <span>打卡记录查询</span></a></li>
      <li><a [routerLink]="['leaveinfo']"><i class="fa fa-link"></i><span>请假申请查询</span></a></li>
      <li><a [routerLink]="['outinfo']"><i class="fa fa-link"></i><span>外出申请查询</span></a></li>
    </ul>
    <!-- /.sidebar-menu -->
  </section>
  <!-- /.sidebar -->
</aside>

<!-- Content Wrapper. Contains page content -->
<div class="wrapper" id="test">
  <!-- Content Header (Page header) -->
  <div class="content-wrapper">
    <section class="content-header">
      <h1>
        {{user.name}},您好！
      </h1>

    </section>

    <!-- Main content -->
    <div id="scroll" class="mui-scroll-wrapper" style="height:800px">
      <div class="mui-scroll">
        <div class="mui-loading">
          <div class="mui-spinner">
            <section>
              <router-outlet></router-outlet>
            </section>
          </div>
        </div>
      </div>
    </div>


  </div>
  <!-- /.content -->
  
<!-- Main Footer -->
<footer class="main-footer">
    <!-- To the right -->
    <div class="pull-right hidden-xs">
      天津大学智能与计算学部软件工程5班
    </div>
    <!-- Default to the left -->
    <strong><a href="http://www.ligang.name/">罡哥牛逼(破音)</a></strong>&nbsp;当前日期：{{date.toLocaleDateString()}}
  </footer>
</div>
<!-- /.content-wrapper -->



<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
  <!-- Create the tabs -->
  <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
    <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <!-- Home tab content -->
    <h3 class="control-sidebar-heading">年假天数</h3>
    <ul class="control-sidebar-menu">
      <li>
        <a href="javascript:;">
          <h4 class="control-sidebar-subheading">
            {{user.annual_leave_length}}&nbsp;天
          </h4>
        </a>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <!-- Home tab content -->
    <h3 class="control-sidebar-heading">剩余可休年假</h3>
    <ul class="control-sidebar-menu">
      <li>
        <a href="javascript:;">
          <h4 class="control-sidebar-subheading">
            {{user.remain_annual_leave}}&nbsp;天
            <span class="pull-right-container">
              <span class="label label-danger pull-right">{{getNum()}}%</span>
            </span>
          </h4>
        </a>
      </li>
    </ul>
  </div>
</aside>
